<template>
  <div>
    <v-header :login="login" :menu="menu"/>
    <div style="width: 950px;margin: 42px auto 0 auto">
      <Modal
        width="700"
        height="600"
        cancel-text
        v-model="newProduct.modal"
        @on-ok="createProduct"
        title="新增应用">
        <Input v-model="productName" placeholder="请输入应用名称" style="width: 300px"/>
      </Modal>
      <List :current="current" :columns="columns" :data="apps.apps.data.recordList"
            :total="apps.apps.data.totalCount"
            @on-change="handlePageChange">
        <ListHeader>
          <ListOperations>
            <Button class="margin-right-sm" shape="circle" type="primary" @click="showModal">
              <Icon type="plus-round"></Icon>
              创建应用
            </Button>
          </ListOperations>
          <ListSearch>
            <Form ref="formInline" inline>
              <Form-item prop="title">
                <Input type="text" placeholder="请输入应用名称" v-model="search.productName" style="width: 200px;"
                       @on-enter="handleSearch"/>
              </Form-item>
              <Form-item>
                <Button type="primary" shape="circle" @click="handleSearch">查询</Button>
              </Form-item>
            </Form>
          </ListSearch>
        </ListHeader>
      </List>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import consts from '@/utils/consts'
  import List, {ListHeader, ListOperations, ListSearch} from '@/components/List'
  import OrderDetail from '@/components/OrderDetail'
  import header from '@/components/header'
  import time from '@/utils/helpers/timeLite'
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'

  export default {
    name: 'home',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch,
      OrderDetail,
      'v-header': header
    },
    data () {
      return {
        current: 1,
        login: true,
        menu: false,
        productName: '',
        newProduct: {
          modal: false
        },
        columns: [{
          title: '应用名称',
          key: 'productName',
          width: 120
        },
          {
            title: '应用号',
            key: 'id',
            width: 250
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 160,
            render (h, params) {
              return h('span', null, time.getDateTime(params.row.createTime))
            }
          },
          {
            title: '状态',
            key: 'status',
            width: 120
          },
          {
            title: '上架状态',
            key: 'auditStatus',
            width: 120,
            render (h, params) {
              return h('span', null, (params.row.auditStatus === 'YES' ? '上架中' : '下架中'))
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '2px'
                  },
                  on: {
                    click: () => {
                      this.$router.push('/appCenter/' + params.row.id + '/summary')
                    }
                  }
                }, '应用中心'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.$router.push('/appManager/' + params.row.id + '/baseInfo')
                    }
                  }
                }, '应用管理')/*,
                 h('Button', {
                 props: {
                 type: 'primary',
                 size: 'small'
                 },
                 style: {
                 marginRight: '8px'
                 },
                 on: {
                 click: () => {
                 this.show(params.row.id)
                 }
                 }
                 }, '删除') */
              ])
            }
          }],
        search: {
          productName: ''
        }
      }
    },
    computed: mapState({
      'apps': state => state.apps
    }),
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)
        this.$store.dispatch('getApps', {
          params: {
            current: current,
            limit: consts.PAGE_SIZE,
            userNo: storage.get('userNo'),
            ...this.search
          }
        })
      },
      showModal () {
        this.$set(this.newProduct, 'modal', true)
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      createProduct () {
        const appNum = this.apps.apps.data.totalCount
        if (appNum > 0) {
          this.$Message.info('只能添加一个应用')
          return
        }
        if (this.productName.trim() === '') {
          this.$Message.error('应用名称不能为空')
          this.productName = ''
        } else {
          new Model('app')
            .POST({
              params: {
                productName: this.productName.trim(),
                userNo: storage.get('userNo')
              }
            })
            .then((res) => {
              this.productName = ''
              this.$Message.success('添加应用成功')
              this.get()
            })
        }
      }
    }
  }
</script>

<style>
</style>
